<template>
  <div class="page_vue">
    <div class="containers sa-flex">
      <ResizeBox :resize-conf="resizeConf">
        <!-- 左侧搜索和上传和新建部分 -->
        <create-upload-btn
          ref="CreateUploadBtnRefs"
          pageType="personal"
          :parentId="propsButtonObj.key || headNodeId"
          @createUploadBtnClick="createUploadBtnClick"
          @handleSelectSearch="handleSelectSearch"
          @pageTitleClick="pageTitleClick"
        >
        </create-upload-btn>
        <div class="left_tree_box">
          <el-tree
            ref="treeDocumentRefs"
            :data="managementList"
            :props="defaultProps"
            node-key="id"
            class="filter-tree"
            :current-node-key="currentId"
            :lazy="true"
            :load="loadNode"
            :filter-node-method="filterNode"
            :highlight-current="true"
            :default-expanded-keys="expandedKeys"
            :expand-on-click-node="false"
            @node-click="elTreeNodeClick"
          >
            <template #default="{ node, data }">
              <span>
                <svg-icon :icon-class="node.expanded ? 'file-open' : 'file-close'"></svg-icon>
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </ResizeBox>

      <div class="right sa-flex-1">
        <breadcrumb-nav pageType="self" :stratBreadList="stratBreadList" :breadList="breadList" @breadRouterClick="breadRouterClick"></breadcrumb-nav>
        <div class="table_box">
          <div v-if="isTableHeaderBtn" class="table_top_btn">
            <!--  @deleteClick="deleteFileClick(tableRowArray)"
                    @moveClick="openDocumentTreeAll('move', tableRowArray)"
                    @enjoyClick="openEnjoyDialog(tableRowArray, 'arr')"
                    @downloadClick="batchDownloadClick(tableRowArray)" -->
            <TableHeaderBtn pageType="self" :tableRowArray="tableRowArray" @otherClick="tableHeaderBtn_otherClick"> </TableHeaderBtn>
          </div>

          <div v-if="isTableTopMoreText" class="table_top_more_text" @click="TopLoadMoreClick">加载更多</div>
          <!-- v-loadmore="apiTreeFileSelectTreePage" -->
          <el-table
            v-loading="tableLoading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            :highlight-current-row="true"
            :height="tableHeight"
            class="tableClass scrollTable"
            :class="[isTableTopMoreText ? 'table_top_more' : '']"
            :row-style="{ height: '50px' }"
            :header-row-style="{ height: '50px' }"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
            @row-dblclick="handleRowDblClick"
            @row-click="handleRowClick"
            @row-contextmenu="rowContextmenuClick"
            @sort-change="changeTableSort"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="名称" :sortable="isTableHeaderBtnFunction()" prop="realName" show-overflow-tooltip>
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <div>
                    <svg-icon
                      :icon-class="selectSvgIcons(scope.row)"
                      style="font-size: 30px; vertical-align: middle; margin-right: 6px; position: relative"
                    ></svg-icon>
                    <div class="" style="width: 30px; height: 30px; position: absolute; top: 8px; left: 12px"></div>
                  </div>
                  <div style="margin: 0; display: inline-block">
                    <span class="realName_class" style="width: 100px">
                      {{ scope.row.realName }}
                      {{ scope.row.suffix ? '.' + scope.row.suffix : '' }}
                    </span>
                    <p style="margin: 0" v-if="scope.row.expert == 'true'"><el-tag size="small">问答文件</el-tag></p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="大小" width="110" :sortable="isTableHeaderBtnFunction()" prop="size">
              <template #default="scope">{{ proxy?.$yuUtils.filterSizeUnit(scope.row.size) }}</template>
            </el-table-column>

            <el-table-column label="修改时间" width="180" :sortable="isTableHeaderBtnFunction()" prop="updateTime">
              <template #default="scope">{{ scope.row.updateTime ? scope.row.updateTime : scope.row.createTime }}</template>
            </el-table-column>
            <el-table-column label="操作" width="180px" prop="handle">
              <template #default="scope">
                <div class="realName_box">
                  <div class="realName_box_right">
                    <el-tooltip effect="dark" content="详情" placement="top-start" :offset="8">
                      <div class="iconBox" @click.stop="openFileDetailClick(scope.row)">
                        <svg-icon icon-class="eye" class="icon_size"></svg-icon>
                      </div>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="收藏" placement="top-start" :offset="8">
                      <div class="iconBox" @click.stop="apiFilesCollectionAddCollection(scope.row)">
                        <svg-icon v-if="scope.row.collection == '1'" icon-class="collect-fill" class="icon_size"></svg-icon>
                        <svg-icon v-else icon-class="collect" class="icon_size"></svg-icon>
                      </div>
                    </el-tooltip>
                  </div>

                  <div>
                    <MoreList :rowItem="scope.row" pageType="self" @moreHandleCommand="moreHandleCommand"></MoreList>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <yu-create-folder ref="yuCreateFolderRef" pageType="self" @confirmClick="realNameConfirmClick"></yu-create-folder>
    <FileInfo ref="FileInfoRef" pageType="self" @confirmClick="openFileDetailClick" @InfoMoreHandleCommand="moreHandleCommand"></FileInfo>
    <YiUploadFile ref="uploadFileRef" :pageType="'personal'" @uploadSuccess="refreshDatas" />
    <CopymoveTree ref="CopymoveTreeRef" @sureClick="sureClick" />
    <TagsInfo ref="TagsInfoRef" />
    <TempCenter ref="TempCenterRef" @closeDocumentDialog="closeDocumentDialog" @getAddDocument="getAddDocument" />
    <TempPubilsh ref="TempPubilshRef" />
    <EnjoyList ref="EnjoyListRef" :Refresh="false" />
    <SelectUser ref="SelectUserRef" @sureDialogTransferClick="sureDialogTransferClick" />
    <EnterpriseDialog ref="EnterpriseDialogRef" @EntSureClick="EntSureClick" />
    <AiText ref="AiTextRef" />
  </div>
</template>

<script setup lang="ts">
import { debounce, throttle } from '@/utils/yuUtils.js';
import personDocApi from '@/api/personDoc/personDocApi';
import docMixins from '@/mixins/docMixins';
import ResizeBox from '@/views/components/yu-dragLayouter/ResizeBox.vue';
import CreateUploadBtn from '@/views/components/newUiModule/create-upload-btn.vue'; //搜索/模版中心/上传文件按钮
import YuCreateFolder from '@/views/components/yu-create-folder/yu-create-folder.vue';
import breadcrumbNav from '@/views/components/newUiModule/breadcrumb-nav.vue';
import TableHeaderBtn from '@/views/components/newUiModule/table-header-btn.vue'; //表格头部按钮
import FileInfo from '@/views/personDoc/fileinfo/file-info.vue'; // 详情
import YiUploadFile from '@/views/components/yiUploadFile/uploadFile.vue';
import CopymoveTree from '@/views/personDoc/components/copymove-tree.vue'; // 复制 and 移动
import MoreList from '@/views/personDoc/fileinfo/more-list.vue'; // 表格更多操作
import TagsInfo from '@/views/personDoc/fileinfo/tags-info.vue'; // 标签弹框
import TempCenter from '@/views/personDoc/components/temp-center.vue'; // 模版中心
import TempPubilsh from '@/views/personDoc/components/temp-pubilsh.vue'; // 调用上传个人模版(Q其中有公共模版及个人模版)
import EnjoyList from '@/views/personDoc/fileinfo/enjoy-list.vue'; // 分享
import SelectUser from '@/views/components/select-user-check/select-user.vue'; // 选择人
import EnterpriseDialog from '@/views/personDoc/components/enterprise-dialog.vue'; // 选择企业树
import AiText from '@/views/personDoc/AiFile/ai-text.vue'; // ai总结

const configs = {
  requstApi: personDocApi,
  pageType: 'self',
  uploadType: 'personal'
};

const {
  AiTextRef,
  EntSureClick,
  EnterpriseDialogRef,
  getAddDocument,
  sureDialogTransferClick,
  SelectUserRef,
  EnjoyListRef,
  TempPubilshRef,
  TempCenterRef,
  closeDocumentDialog,
  refreshDatas,
  TagsInfoRef,
  sureClick,
  CopymoveTreeRef,
  ColleaguesRef,
  FileInfoRef,
  yuDistributeRefs,
  resizeConf,
  managementList,
  defaultProps,
  treeDocumentRefs,
  currentId,
  expandedKeys,
  headNodeId,
  propsButtonObj,
  yuCreateFolderRef,
  tableLoading,
  isTableTopMoreText,
  tableData,
  tableHeight,
  tableRowArray,
  isTableHeaderBtn,
  stratBreadList,
  breadList,
  multipleTable,
  createUploadBtnClick,
  handleSelectSearch,
  pageTitleClick,
  loadNode,
  filterNode,
  elTreeNodeClick,
  realNameConfirmClick,
  apiTreeFileSelectTreePage,
  TopLoadMoreClick,
  tableRowClassName,
  isTableHeaderBtnFunction,
  handleSelectionChange,
  handleRowDblClick,
  handleRowClick,
  rowContextmenuClick,
  changeTableSort,
  selectSvgIcons,
  openFileDetailClick,
  apiFilesCollectionAddCollection,
  moreHandleCommand,
  breadRouterClick,
  tableHeaderBtn_otherClick,
  onContextMenu,
  uploadFileRef
} = docMixins(configs);

const { proxy } = getCurrentInstance() as any;

const scrollTableDom: any = ref('');

onMounted(() => {
  // 查找表格滚动区域的 DOM 元素，并将其赋值给 scrollTableDom
  scrollTableDom.value = document.querySelector('.scrollTable .el-table__body-wrapper .el-scrollbar__wrap');

  // 为该元素添加 'scroll' 事件监听器，滚动时调用 handleTableScroll 函数
  scrollTableDom.value.addEventListener('scroll', handleTableScroll);
});

onUnmounted(() => {
  // 在组件销毁时清除存储的 'expandedKeys' 数据
  sessionStorage.removeItem('expandedKeys');

  // 在组件销毁时移除滚动事件监听器
  scrollTableDom.value.removeEventListener('scroll', handleTableScroll);
});

//计算到最低端的滚动条位置
const handleTableScroll = debounce((event) => {
  // 获取触发事件的目标 DOM 元素，即滚动容器
  const table = event.target;
  // 计算滚动条距离底部的距离
  const scrollPosition = table.scrollHeight - table.scrollTop - table.clientHeight;
  // console.log('🚀 ~ handleTableScroll ~ scrollPosition:', scrollPosition);

  // 如果滚动条距离底部小于等于 5 像素，表示用户已接近底部
  if (scrollPosition <= 5) {
    apiTreeFileSelectTreePage('');
    // console.log(1234);
  }
}, 300);
</script>

<style scoped lang="scss">
.page_vue {
  height: calc(100vh - 50px);

  .table_box {
    margin-left: 10px;
    position: relative;

    .tableClass {
      // height: calc(100vh - 150px) !important;
      width: 100%;
      border-color: rgba(0, 0, 0, 0);
    }

    :deep(th) {
      color: #333;
      font-weight: normal;
    }

    :deep(.descending .sort-caret.descending) {
      border-top-color: #6698ff;
    }

    :deep(.ascending .sort-caret.ascending) {
      border-bottom-color: #6698ff;
    }

    :deep(td.el-table__cell) {
      border-bottom: 1px solid #eee;
    }

    :deep(.el-table__body tr:hover .realName_box_right) {
      visibility: visible;
    }

    .el-table :deep(.el-table__header-wrapper th) {
      background-color: #ffffff !important;
    }

    .el-table :deep(.table_row_topmark) {
      background: rgba(102, 152, 255, 0.1) !important;
    }

    // ::v-deep .el-table th div {
    //   display: inline-flexb;
    // }
  }
}

/**拖拽--start */
.sa-flex {
  display: flex;
  flex-wrap: no-wrap;
}

.sa-flex-1 {
  flex: 1;
  overflow: auto;
  border-left: 1px solid #eee;
}

.containers {
  background: #ffffff !important;
  // min-height: 600px;
}

/**拖拽-end */
.left_tree_box {
  width: calc(100% - 4px);
  font-size: 14px;
  height: calc(100vh - 50px);
  overflow: auto;
}

.btn_box {
  height: 48px;
}

.table_top_more_text {
  position: absolute;
  top: 50px;
  width: calc(100% - 10px);
  z-index: 1;
  height: 30px !important;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  color: #016cff;
  cursor: pointer;
  z-index: 999;
}

.realName_box {
  display: flex;
  // justify-content: space-between;
  // justify-content: flex-end;
  align-items: center;
}

.realName_box_right {
  display: flex;
  align-items: center;
  visibility: hidden;

  .iconBox {
    padding: 7px 8px 2px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }
  }
}

.icon_size {
  font-size: 18px;
}

.table_top_btn {
  width: 100%;
  position: absolute;
  height: 48px;
  display: flex;
  align-items: center;
  margin-left: 55px;
  background-color: #ffffff;
  z-index: 10;
}
</style>
